<template>
	<div class="new-modal" style="">
		<div class="new-modal-title" style="font-size: 17px; position: absolute; width: 100%; z-index: 999;">
			<i class="ion-chevron-left return" @click="genderDelete()"></i> 筛选
			<i class="right-submit" @click="genderSubmit()">确定</i>
			<i class="right-submit" @click="genderReset">重置</i>
		</div>
		<div class="mouchs" style="padding-top: 44px;overflow-y: auto; height: 100%;">
			<div class="mouchs-box">
				<div class="mouchs-list">
					<item style="padding: 0 15px;">
						<div class="car-enitor-tr" @click="showCarEnviron">
							<div class="car-editor-name">排放标准</div>
							<div class="car-editor-input"><input type="text" placeholder="请选择排放标准" v-model="carEnviron" readonly /></div>
							<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
						</div>
					</item>
					<div class="mouchs-item">
						<div class="mouchs-title">
							<h5>里程</h5>
							<em>/单位：万公里|</em>
							<span v-if="mathMin==age.min&&mathMax==age.max||age.stateA==age.stateB&&age.stateB==age.max">不限</span>
							<span v-if="mathMin==age.min&&mathMax!=age.max&&age.stateA!=age.stateB">低于{{mathMax}}</span>
							<span v-if="mathMin!=age.min&&mathMax==age.max&&age.stateA!=age.stateB">大于{{mathMin}}</span>
							<span v-if="mathMin!=age.min&&mathMax!=age.max&&age.stateA!=age.stateB">{{`${mathMin}~${mathMax}之间`}}</span>
							<span v-if="mathMax!=age.max&&age.stateA==age.stateB">{{mathMax}}</span>
							
						</div>
						<div class="mouchs-section">
							<section>
								<div class="range-list">

									<ul >
										<li v-for="item in age.Arrays" :class="{on:item>=mathMin&&item<=mathMax}" :style="{width:100/(age.max/age.step+1)+'%'}">{{item==age.max?'不限':item}}</li>
									</ul>
								</div>
								<div class="ranges">
									<input type="range" :min="age.min" :step="age.step" :max="age.max" @change="ageA" v-model.number="age.stateA" />
									<input type="range" :min="age.min" :step="age.step" :max="age.max" @change="ageB" v-model.number="age.stateB" />
									<span class="range-block" :style="{width:Math.abs(age.stateB-age.stateA)/age.max*300+'px',left:mathMin/age.max*300+'px'}"></span>
									
								</div>
							</section>
						</div>
					</div>	
					<div class="mouchs-item">
						<div class="mouchs-title">
							<h5>车龄</h5>
							<em>/单位：年|</em>
							<span v-if="agemathMin==ages.min&&agemathMax==ages.max||ages.stateA==ages.stateB&&ages.stateB==ages.max">不限</span>
							<span v-if="agemathMin==ages.min&&agemathMax!=ages.max&&ages.stateA!=ages.stateB">低于{{agemathMax}}</span>
							<span v-if="agemathMin!=ages.min&&agemathMax==ages.max&&ages.stateA!=ages.stateB">大于{{agemathMin}}</span>
							<span v-if="agemathMin!=ages.min&&agemathMax!=ages.max&&ages.stateA!=ages.stateB">{{`${agemathMin}~${agemathMax}之间`}}</span>
							<span v-if="agemathMax!=ages.max&&ages.stateA==ages.stateB">{{agemathMax}}</span>
						</div>
						<div class="mouchs-section">
							<section>
								<div class="range-list">

									<ul >
										<li v-for="item in ages.Arrays" :class="{on:item>=agemathMin&&item<=agemathMax}" :style="{width:100/(ages.max/ages.step+1)+'%'}">{{item==ages.max?'不限':item}}</li>
									</ul>
								</div>
								<div class="ranges">
									<input type="range" :min="ages.min" :step="ages.step" :max="ages.max" @change="agesA" v-model.number="ages.stateA" />
									<input type="range" :min="ages.min" :step="ages.step" :max="ages.max" @change="agesB" v-model.number="ages.stateB" />
									<span class="range-block" :style="{width:Math.abs(ages.stateB-ages.stateA)/ages.max*300+'px',left:agemathMin/ages.max*300+'px'}"></span>
									
								</div>
							</section>
						</div>
					</div>	
					<div class="mouchs-item">
						<div class="mouchs-title">
							<h5>颜色</h5>
							<span>{{colorParams.colorName||'不限'}}</span>
						</div>
						<div class="mouchs-section">
							<ul class="mouchs-section-ul">
								<li v-for="item in colorList" @click="colorChange(item)" :class="{on:item.colorId == colorParams.colorId}" >
									<div class="mouchs-code" :style="'background:'+item.colorCode+';'"></div>
									<span>{{item.colorName}}</span>
								</li>
							</ul>
						</div>
					</div>	
					<div class="mouchs-item">
						<div class="mouchs-title">
							<h5>车身类型</h5>
							<span>{{styleParams.carTypeName||'不限'}}</span>
						</div>
						<div class="mouchs-section">
							<ul class="mouchs-section-style">
								<li v-for="item in styleList" :class="{on:item.carTypeId == styleParams.carTypeId}" @click="styleChange(item)" >{{item.carTypeName}}</li>
							</ul>
						</div>
					</div>
						
					
				</div>
			</div>
		</div>
		<transition name="bottom" v-for="(item,index) in paramsIs">
			<keep-alive>
				<modal :paramsIs="paramsIs" :itemIndex="index" style="z-index: 999999999; display: block;" />
			</keep-alive>
		</transition>
		
	</div>
</template>

<script>
	import modal from 'src/assembly/modalList'
	import { bus } from 'bus.js'
	export default {
		data() {
			return {
				age:{
					min: 0,
					max: 12,
					stateA: 0,
					stateB: 12,
					step:2,
					Arrays:[],
				},
				ages:{
					min: 0,
					max: 12,
					stateA: 0,
					stateB: 12,
					step:2,
					Arrays:[],
				},
				agek:{
					min: 0,
					max: 135,
					stateA: 0,
					stateB: 135,
					step:15,
					Arrays:[],
				},
				colorList:[],
				styleList:[],
				colorParams:{},
				styleParams:{},
				carEnviron:'',
				paramsIs:[],
			}
		},
		components:{
			modal,
		},
		mounted() {
			this.rangeInit()
			bus.$off('showCarEnviron')
			bus.$on('showCarEnviron',(index)=>{
				this.carEnviron = this.paramsIs[0].list[index].name
				this.paramsIs = []
			})
		},
		methods: {
			showCarEnviron() {
				this.paramsIs.push({
					list: [{
						name: '国I',
						id:''
					}, {
						name: '国II',
						id: ''
					}, {
						name: '国III',
						id: ''
					}, {
						name: '国IV',
						id: ''
					}, {
						name: '国V',
						id: ''
					}, {
						name: '欧I',
						id: ''
					}, {
						name: '欧II',
						id: ''
					}, {
						name: '欧III',
						id: ''
					}, {
						name: '欧IV',
						id: ''
					}, {
						name: '欧V',
						id: ''
					}, {
						name: '欧VI',
						id: ''
					}],
					title: '排放标准',
					emit: 'showCarEnviron',
				})
			},
			ageA(val){				
				this.age.stateA = val.target.value
			},
			ageB(val){				
				this.age.stateB = val.target.value
			},
			agesA(val){				
				this.ages.stateA = val.target.value
			},
			agesB(val){				
				this.ages.stateB = val.target.value
			},
			agekA(val){				
				this.agek.stateA = val.target.value
			},
			agekB(val){				
				this.agek.stateB = val.target.value
			},
			colorChange(val){
				if(val.colorId == this.colorParams.colorId){
					this.colorParams = {}
				}else{
					this.colorParams = val
				}
			},
			styleChange(val){
				if(val.carTypeId == this.styleParams.carTypeId){
					this.styleParams = {}
				}else{
					this.styleParams = val
				}
			},
			genderReset(){				
				this.age.stateA = this.age.min
				this.age.stateB = this.age.max
				this.ages.stateA = this.ages.min
				this.ages.stateB = this.ages.max
				this.agek.stateA = this.agek.min
				this.agek.stateB = this.agek.max
				this.colorParams.colorName = ''
				this.styleParams = {}
				this.carEnviron = ''
				this.genderSubmit()
			},
			genderSubmit(){
				this.$emit('cancel',{
					mileage:{
						max:Math.max.apply(Math,[this.age.stateA,this.age.stateB])==this.age.max?'':Math.max.apply(Math,[this.age.stateA,this.age.stateB]),
						min:Math.min.apply(Math,[this.age.stateA,this.age.stateB])==this.age.min?'':Math.min.apply(Math,[this.age.stateA,this.age.stateB])
					},
					vage:{
						max:Math.max.apply(Math,[this.ages.stateA,this.ages.stateB])==this.ages.max?'':Math.max.apply(Math,[this.ages.stateA,this.ages.stateB]),
						min:Math.min.apply(Math,[this.ages.stateA,this.ages.stateB])==this.ages.min?'':Math.min.apply(Math,[this.ages.stateA,this.ages.stateB])
					},
					oage:{
						max:Math.max.apply(Math,[this.agek.stateA,this.agek.stateB])==this.agek.max?'':Math.max.apply(Math,[this.agek.stateA,this.agek.stateB]),
						min:Math.min.apply(Math,[this.agek.stateA,this.agek.stateB])==this.agek.min?'':Math.min.apply(Math,[this.agek.stateA,this.agek.stateB])
					},
					color:this.colorParams.colorName || '' ,
					type:this.styleParams.carTypeId || '',
					carEnviron:this.carEnviron||'',
				})
			},
			genderDelete() {
				this.$emit('cancel')
			},
			rangeInit(){
				for(var i = 0 ; i <= this.age.max ; i += this.age.step){
					this.age.Arrays.push(i)
				}
				for(var i = 0 ; i <= this.ages.max ; i += this.ages.step){
					this.ages.Arrays.push(i)
				}
				for(var i = 0 ; i <= this.agek.max ; i += this.agek.step){
					this.agek.Arrays.push(i)
				}
			}
		},
		created(){
			window.axios.get(baseUrl+'/controller/getColorList').then((res)=>{
				this.colorList = res.data.result
			})
			window.axios.get(baseUrl+'/controller/getCarTypeList').then((res)=>{
				this.styleList = res.data.result
			})
		},
		computed:{
			mathMax(){
				return Math.max.apply(Math,[this.age.stateA,this.age.stateB])
			},
			mathMin(){
				return Math.min.apply(Math,[this.age.stateA,this.age.stateB])
			},
			agemathMax(){
				return Math.max.apply(Math,[this.ages.stateA,this.ages.stateB])
			},
			agemathMin(){
				return Math.min.apply(Math,[this.ages.stateA,this.ages.stateB])
			},
			agekmathMax(){
				return Math.max.apply(Math,[this.agek.stateA,this.agek.stateB])
			},
			agekmathMin(){
				return Math.min.apply(Math,[this.agek.stateA,this.agek.stateB])
			},
			
		}
	}
</script>
